<!DOCTYPE html>
<html>
<head>
    <title>功能管理</title>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-3 col-sm-4 col-xs-12">
            <div class="widget  no-padding">
                <div class="widget-header bg-themeprimary">
                    <i class="widget-icon typcn typcn-th-large-outline"></i>
                    <span class="widget-caption">功能权限</span>
                </div>
                <div class="widget-body">
                    <ul id="functionTree" class="ztree" style="width: auto; overflow: auto;"></ul>
                </div>
            </div>
        </div>
        <div class="col-lg-9 col-sm-8 col-xs-12">
            <div class="widget  no-padding">
                <div class="widget-header bg-themeprimary">
                    <i class="widget-icon typcn typcn-th-list"></i>
                    <span class="widget-caption">功能权限管理</span>
                </div>
                <div class="widget-body">
                    <table id="grid-data">
                        <thead>
                        <tr>
                            <th style="text-align: center;width: auto;">权限名称</th>
                            <th style="text-align: center;width: auto;">URL</th>
                            <th style="text-align: center; width: auto;">功能</th>
                            <th style="text-align: center;width: auto;">可见(√)</th>
                            <th style="text-align: center;width: auto;">图标</th>
                            <th style="text-align: center;width: auto;">序号</th>
                            <th style="text-align: center;width: auto;">所属上级</th>
                            <th style="width: 200px; text-align: center;" data-culture="operation">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="row-no-display">
                            <td style="text-align: center;">$name$</td>
                            <td style="text-align: center;">$href$</td>
                            <td><span style="word-break: break-all;display: inline-block;max-width: 500px; ">$permission$</span>
                            </td>
                            <td style="text-align: center;">$functionType$</td>
                            <td render="icon" style="text-align: center; "></td>
                            <td style="text-align: center;">$sort$</td>
                            <td style="text-align: center;">$parentName$</td>
                            <td class="text-left" style="text-align: center;">
                                <a rel='editOrg' class="btn btn-info btn-xs edit"><i
                                        class="fa fa-edit"></i> 编辑</a>
                                <a rel='deleteOrg' class="btn btn-danger btn-xs edit"><i
                                        class="fa fa-times"></i> 删除</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade form" id="editmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="widget no-padding">
            <div class="widget-header bg-themeprimary ">
                <i class="widget-icon glyphicon glyphicon-credit-card"></i>
                <span class="widget-caption">功能权限管理</span>
                <div class="widget-buttons">
                    <a tabindex="7" data-type="reset"><i class="fa fa-refresh"></i></a>
                    <a data-dismiss="modal">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="widget-body">
                <div>
                    <form class="form-horizontal" role="form" id="editForm">
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right" for="name">中文权限名称</label>
                            <input name="id" id="id" type="hidden"/>
                            <div class="col-sm-10">
                                <input class="form-control" id="name" name="name" type="text"
                                       placeholder="中文权限名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right" for="enName">英文权限名称</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="enName" name="enName" type="text"
                                       placeholder="英文权限名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right" for="parentName">所属上级</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="parentName" name="parentName" type="text"
                                       disabled="disabled">
                                <input type="hidden" id="parentId" name="parentId">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right" for="href">URL</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="href" name="href" type="text"
                                       placeholder="姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right" for="functionType">是否菜单可见</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="functionType" name="functionType">
                                    <option value="1">可见</option>
                                    <option value="0">不可见</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right" for="loadType">加载方式</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="loadType" name="loadType">
                                    <option value="0">html</option>
                                    <option value="1">iframe</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right" for="permission">功能</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="permission" name="permission" type="text"
                                       placeholder="功能">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right" for="icon">图标</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="icon" name="icon" type="text"
                                       placeholder="图标">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right" for="iconColor">图标颜色</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="iconColor" name="iconColor" type="text"
                                       placeholder="图标颜色">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right" for="remark">描述</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="remark" name="remark" type="text"
                                       placeholder="描述">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right" for="sort">序号</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="sort" name="sort" type="text"
                                       placeholder="序号">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-8 col-sm-4" style="text-align: right">
                                <a class="btn btn-success" href="#" id="btnSave"><i class="fa fa-check right"></i>保存</a>
                                <a class="btn btn-danger" href="#" data-dismiss="modal"><i class="fa fa-times right"></i>关闭</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var functionObj = {
        insert: true,
        functionTreeObj: null,
        currentTreeNode: null,
        tempTreeNode: null,
        currentFunction: null,
        validateParam: {
            submitBtn: $("#btnSave"),
            submitHandler: function (obj) {
                obj.insert = functionObj.insert;
                if (!functionObj.insert) {
                    obj.id = functionObj.currentFunction.id;
                }
                functionObj.tempTreeNode = functionObj.currentTreeNode;
                obj.parentIds = "";
                while (functionObj.tempTreeNode.getParentNode()) {
                    obj.parentIds += functionObj.tempTreeNode.id + ',';
                    functionObj.tempTreeNode = functionObj.tempTreeNode.getParentNode();
                }
                obj.parentIds += functionObj.tempTreeNode.id;
                $('#btnSave').button('loading');
                $.request("/admin/sys/function/save", obj, function (result) {
                    if (result) {
                        $('#editmodal').modal('hide');
                        bootbox.alert('保存成功！');
                        initFunctionTree();
                        functionObj.grid.ext.refresh();
                    } else {
                        bootbox.alert('保存失败！');
                    }
                }).always(function () {
                    $('#btnSave').button('reset');
                    functionObj.validateParam.resetBtn.trigger("reset");
                });
            },
            fields: {
                name: {
                    validators: {
                        notEmpty: {}
                    }
                },
                sort: {
                    validators: {
                        notEmpty: {},
                        dataType: {
                            dataType: 'decimal',
                            message: '只能输入数字'
                        }
                    }
                }
            }
        },
        grid: {
            keys: ['name'],
            url: "/admin/sys/function/query/page/parentId",
            placeholder: '机构名称',
            stableparm: function () {
                return {parentId: functionObj.currentTreeNode.id};
            },
            events: {
                icon: function (row) {
                    return "<span class='" + row.icon + "' style='color:" + row.iconColor + "'></span>";
                },
                editOrg: function (row) {
                    functionObj.insert = false;
                    functionObj.currentFunction = row;
                    functionObj.validateParam.resetBtn.trigger("reset");
                    $("#parentName").val(functionObj.currentTreeNode.name);
                    $.setobject(row, 'editForm');
                    $('#editmodal').modal('show');
                },
                deleteOrg: function (row) {
                    bootbox.confirm('确认删除？', function () {
                        deleteRowList([id = row.id]);
                    });
                }
            },
            tools: [{
                text: '新增主功能权限', img: 'fa fa-plus', event: function (selectItems) {
                    functionObj.insert = true;
                    functionObj.validateParam.resetBtn.trigger("reset");
                    if (functionObj.currentTreeNode != undefined || functionObj.currentTreeNode != null) {
                        clearForm();
                        $("#parentName").val('主功能权限');
                        $("#parentId").val();
                    }
                    $('#editmodal').modal('show');
                }
            }, {
                text: '新增', img: 'fa fa-plus', event: function (selectItems) {
                    functionObj.insert = true;
                    functionObj.validateParam.resetBtn.trigger("reset");
                    if (functionObj.currentTreeNode != undefined || functionObj.currentTreeNode != null) {
                        clearForm();
                        $("#parentName").val(functionObj.currentTreeNode.name);
                        $("#parentId").val(functionObj.currentTreeNode.id);
                    }
                    $('#editmodal').modal('show');
                }
            }, {
                text: '编辑', img: 'glyphicon glyphicon-edit', event: function (selectItems) {
                    if (selectItems && selectItems.length == 1) {
                        functionObj.insert = false;
                        functionObj.validateParam.resetBtn.trigger("reset");
                        updateRow(selectItems[0]);
                    }
                    else {
                        bootbox.alert('请选择一条记录！');
                    }
                }
            }, {
                text: '删除', img: 'glyphicon glyphicon-remove', event: function (selectItems) {
                    if (selectItems && selectItems.length > 0) {
                        bootbox.confirm('确认删除？', function () {
                            var ids = [];
                            $.each(selectItems, function (i, row) {
                                ids.push(row.id);
                            });
                            deleteRowList(ids);
                        });
                    } else {
                        bootbox.alert('请选择待删除的记录！');
                    }
                }
            }]
        }
    }
    function initFunctionTree() {
        clearForm();
        functionObj.functionTreeObj = $('#functionTree').unbind().tree({
            data: {
                key: {name: 'name'},
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId",
                    rootPId: null,
                    url: '/admin/sys/function/query'
                }
            },
            callback: {
                onClick: functionTreeNodeClick
            },
            expandLevel: 1
        });
        if (functionObj.currentTreeNode) {
            functionObj.functionTreeObj.selectNode(functionObj.currentTreeNode = functionObj.functionTreeObj.getNodeByParam('id', functionObj.currentTreeNode.id));
        } else {
            functionObj.functionTreeObj.selectNode(functionObj.currentTreeNode = functionObj.functionTreeObj.getNodes()[0]);
            if (functionObj.grid.ext) {
                functionObj.grid.ext.refresh();
            }
        }
    }

    function functionTreeNodeClick(event, treeId, treeNode) {
        functionObj.insert = false;
        functionObj.currentTreeNode = treeNode;
        functionObj.grid.ext.refresh();
    }
    function updateRow(obj) {
        currentOrg = obj;
        obj.parentId = functionObj.currentTreeNode.id;
        obj.parentName = functionObj.currentTreeNode.name;
        $.setobject(obj, 'editForm');
        $('#editmodal').modal('show');
    }
    function deleteRowList(ids) {
        $.request('/admin/sys/function/delete/ids', {ids: ids}, function () {
            bootbox.alert("删除成功!");
            initFunctionTree();
            functionObj.grid.ext.refresh();
        }, function () {
            bootbox.alert("删除失败!");
        })
    }
    function clearForm() {
        functionObj.insert = true;
        $("#name").val('');
        $("#enName").val('');
        $("#id").val('0');
        $("#icon").val('');
        $("#href").val('');
        $("#functionType").val('1');
        $("#permission").val('');
        $("#remark").val('');
        $("#parentId").val('');
        $("#parentName").val('');
        $("#sort").val('');
    }
    function init() {
        initFunctionTree();
        $("#grid-data").table(functionObj.grid);
        $('#editForm').validate(functionObj.validateParam);
    }
    function dispose() {
        functionObj = {};
    }
</script>
</body>
</html>